<template>
  <div>
    <mt-navbar v-model="selected" fixed="" >
      <mt-tab-item id="mine" class="nav-bar">今日日程</mt-tab-item>
      <mt-tab-item id="today">近7天日程</mt-tab-item>
      <mt-tab-item id="all">所有日程</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="mine">
        <mine-schedule-list></mine-schedule-list>
      </mt-tab-container-item>
      <mt-tab-container-item id="today">
        <today-schedule-list></today-schedule-list>
      </mt-tab-container-item>
      <mt-tab-container-item id="all">
        <schedule-list></schedule-list>
      </mt-tab-container-item>
    </mt-tab-container>
    <div class="add-schedule-wrapper">
      <router-link :to="{name: 'scheduleAdd'}">
        <i class="fa fa-calendar-plus-o fa-lg"></i>
      </router-link>
    </div>
  </div>
</template>
<script>
  import ScheduleList from './ScheduleList'
  import MineScheduleList from  './MineScheduleList'
  import TodayScheduleList from './TodayScheduleList.vue'
  export default{
    data () {
      return{
        selected: 'mine'
      }
    },
    components:{
      ScheduleList,
      MineScheduleList,
      TodayScheduleList
    },
    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  a:link{text-decoration:none;}
  a:visited{text-decoration:none;}
  a:hover{text-decoration:none;}
  a:active{text-decoration:none;}
  .mint-navbar{
    margin: 0 0 20px;
  }
  .add-schedule-wrapper{
    position: fixed;
    top: 16%;
    right: 10px;
    background: #26a2ff;
    height: 50px;
    width:50px;
    border-radius: 50%;
    z-index: 999;
    opacity:0.5;
    @include flex-center;
    a{
      color: #fff;
      padding: 5px;
      i{

      }
    }
  }
</style>
